{extend name="public/base" /}
{block name="content"}
<!-- Page Content -->
<div class="page-content">
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <a href="#">系统</a>
            </li>
            <li>
                <a href="#">公司管理</a>
            </li>
            <li class="active">添加公司</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->

    <!-- Page Body -->
    <div class="page-body">

        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption">新增公司</span>
                    </div>
                    <div class="widget-body">
                        <div id="horizontal-form">
                            <form class="form-horizontal" role="form" action="" method="post"
                                  enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">公司名称</label>
                                    <div class="col-sm-6">
                                        <input class="form-control" id="name" placeholder="" name="name" required=""   type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">公司logo</label>
                                    <div class="col-sm-6">
                                        <input  id="logo" placeholder="" name="logo" required=""  type="file">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">公司电话</label>
                                    <div class="col-sm-6">
                                        <input class="form-control" id="tel" placeholder="" name="tel" required="" minlength="6" maxlength="16"   type="text">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">关于公司</label>
                                    <div class="col-sm-6">
                            <textarea id="content" name="about">
                        </textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">区域</label>
                                    <div class="col-sm-6">
                                        <select name="areaid">
                                            {volist name="area" id="area"}
                                            <option value="{$area.id}">{$area.aname}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">风格</label>
                                    <div class="col-sm-6">
                                        {volist name="style" id="style"}
                                        <div class="checkbox" style="display: inline-block;margin-right: 12px;">
                                            <label>
                                                <input type="checkbox" name="styleid[]" value="{$style.id}">
                                                <span class="text">{$style.sname}</span>
                                            </label>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">类型</label>
                                    <div class="col-sm-6">
                                        {volist name="type" id="type"}
                                        <div class="checkbox" style="display: inline-block;margin-right: 12px;">
                                            <label>
                                                <input type="checkbox" name="typeid[]" value="{$type.id}">
                                                <span class="text">{$type.tname}</span>
                                            </label>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">描述</label>
                                    <div class="col-sm-6">
                                        <textarea class="form-control" name="desc" id="" cols="60" rows="5"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">图列</label>
                                    <div class="col-sm-6 addbtn_wrap">
                                        <input  type="file" name="image[]" id="file1" style="z-index: 1;width: 60px;display: inline-block" onchange="getPhoto(this)">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">预览</label>
                                    <div class="col-sm-6 img_wrap">
                                    </div>

                                </div>

                                <div class="form-group">
                                    <label for="group_id" class="col-sm-2 control-label no-padding-right">banner</label>
                                    <div class="col-sm-6">
                                        <input  type="file" name="banner[]" multiple id="file2" style="z-index: 1;display: inline-block">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default">保存信息</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /Page Body -->
</div>
<!-- /Page Content -->

{/block}
{block name="js"}
{__block__}
<script type="text/javascript">


    /*预览*/
    var count=1;
    function getPhoto(node) {

        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }

            try{
                imgURL =  file.getAsDataURL();
            }catch(e){
                imgRUL = window.URL.createObjectURL(file);
            }
        }catch(e){
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }

        /*动态添加file和对应的图片预览*/
        createPic();
        createFile();

        count++;
        return imgURL;
    }

    /*创建图片预览元素*/
    function createPic() {
        var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+
            '<img  src="'+imgRUL+'"" class="img img-rounded">'+
            '<div class="delete"><img src="__STATIC__/images/del.jpg" width="20" onclick="deletePic(this)"></div>'+
            '</div>';

        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/

        for(var i=0;i< $('input[type=file]').length-1;i++){
            var val= $('input[type=file]').eq(i).val();


            if($('input[type=file]').last().val()==val){

                /*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
                count=count-1;
                return;
            }
        }

        $('.img_wrap').append(picText);

    }



    /*创建新的file元素*/
    function createFile() {

        var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">';

        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/

        for(var i=0;i< $('input[type=file]').length-1;i++){
            var val= $('input[type=file]').eq(i).val();

            if($('input[type=file]').last().val()==val){
                var file = $('input[type=file]').last();
                file.after(file.clone().val(""));
                file.remove();
                alert("图片已存在！");
                return;
            }
        }


        $('.addbtn_wrap').append(flieText);


        /*图片数量大于1，显示提交按钮，添加一次判断一次*/
        if($('.pic_wrap').length<=0){

            $('input[type=submit]').css('display','none');
        }else {
            $('input[type=submit]').css('display','block');
        }
    }



    /*移入移出，删除遮罩层显示隐藏*/
    function overDelete(obj) {
        $(obj).children('div').show();
    }

    function leaveDelete(obj) {
        $(obj).children('div').hide();
    }



    /*删除图片和对应的file*/
    function deletePic(obj) {

        /*提取图片的id的数字部分*/
        var picId=$(obj).parent().parent().attr('id');

        var picVal= picId.replace(/[^0-9]/ig,"");

        var fileArr=$('input[type=file]');

        /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/

        fileArr.each(function () {

            /*提取file的id的数字部分*/
            var fileId=$(this).attr('id');
            var fileVal = fileId.replace(/[^0-9]/ig,"");
            if(fileVal==picVal){
                $(this).remove();
                $(obj).parent().parent().remove();
            }
        });

        /*图片数量大于1，显示提交按钮,删除一次判断一次*/

        if($('.pic_wrap').length<=0){

            $('input[type=submit]').css('display','none');

        }else {
            $('input[type=submit]').css('display','block');
        }
    }


</script>
{/block}